<template>
  <div class="myAvatar">
    <!--展示头像-->
    <div v-if="!select">
      <div class="avatar">
        <el-avatar v-if="avatar !== ''" :src="avatarUrl" :size="120" @click.native="select=true"></el-avatar>
      </div>
      <div class="text" @click="select=true">点击头像更换</div>
    </div>
    <!--上传头像-->
    <div v-else>
      <div class="select">
        <!--选择文件-->
        <el-upload
          list-type="picture-card"
          ref="upload"
          accept="image/*"
          :action="actionUrl"
          :show-file-list="false"
          :auto-upload="false"
          :data="uploadData"
          :on-success="onSuccess"
          :on-change="onChange"
        >
          <img
            v-if="imageUrl"
            :src="imageUrl"
            alt=""
            style="height: 148px;width: 148px; object-fit: fill"
          >
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <el-divider direction="vertical"></el-divider>
        <!--选中头像展示-->
        <div class="currentAvatar">
          <el-avatar v-if="imageUrl" :src="imageUrl" :size="80"></el-avatar>
          <el-avatar v-else-if="avatar !== ''" :src="avatarUrl" :size="80"></el-avatar>
          <div>当前头像</div>
        </div>
      </div>
      <!--上传图片要求-->
      <div class="upload-handle">
        <div>
          请选择图片上传：大小180 * 180像素支持JPG、PNG等格式，图片需小于2M
        </div>
        <div class="button">
          <el-button @click="uploadAvatar" type="primary">更新</el-button>
          <el-button @click="select=false">返回</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { baseUrl } from '@/utils/const'
import { getId, getToken } from '@/utils/auth'

export default {
  data () {
    return {
      select: false,
      uploadData: {},
      imageUrl: ''
    }
  },
  computed: {
    avatar () {
      return this.$store.getters.avatar
    },
    avatarUrl () {
      return baseUrl + this.avatar
    },
    actionUrl () {
      return baseUrl + 'upload'
    }
  },
  mounted () {
    this.uploadData.id = getId()
    this.uploadData.token = getToken()
  },
  methods: {
    uploadAvatar () {
      this.$refs.upload.submit()
    },
    onSuccess () {
      this.$store.dispatch('user/initUserInfo')
      this.$message.success({
        duration: 1000,
        message: '修改成功'
      })
    },
    onChange (file, fileList) {
      if (fileList.length > 1) {
        fileList.shift()
      }
      this.imageUrl = URL.createObjectURL(file.raw)
    }
  }
}
</script>

<style scoped lang="less">

.myAvatar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 50px;

  .avatar {
    display: flex;
    justify-content: center;
    cursor: pointer;
  }

  .text {
    margin-top: 30px;
    text-align: center;
    width: 120px;
    display: inline-block;
    box-sizing: border-box;
    padding: 2px 4px;
    background-color: @menuColor;
    color: @menuText_light;
    border-radius: 6px;
    cursor: pointer;
  }

  .select {
    display: flex;
    justify-content: center;
    align-items: center;

    .el-divider--vertical {
      height: 148px;
      width: 2px;
      margin: 0 40px;
    }

    .currentAvatar {
      display: flex;
      height: 148px;
      width: 148px;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      div {
        text-align: center;
        font-size: small;
        color: @menuText_gray;
        margin-top: 20px;
      }
    }
  }

  .upload-handle {
    margin-top: 40px;

    div:first-child {
      text-align: center;
      font-size: small;
      color: @menuText_gray;
    }

    .button {
      margin-top: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      .el-button {
        width: 120px;
      }
    }
  }
}

</style>
